<template>
  <div>
    <mt-cell :title="pictitle" style="">
      <span style="" class="h3" @click="addtime">{{ grantime }}</span>
    </mt-cell>

    <mt-datetime-picker ref="picker" :start-date="starttime" :visible-item-count="5" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" @visible-change="closepicker" />
    <div class="datePicker"></div>
  </div>
</template>

<script>
export default {
  props: {
    pictitle: {
      type: String,
      required: true
    },
    picdata: {
      type: Array,
      required: true
    },
    values: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      handler: function (e) {
        e.preventDefault()
      },
      popupVisible: false,
      kako: true,
      starttime: new Date(),
      age: '',
      grantime: '',
      dataList: [
        {
          values: []
        }
      ],
      showname: ''
    }
  },
  mounted () {
    if (this.picdata) {
      for (let i = 0; i < this.picdata.length; i++) {
        if (this.picdata[i].showname == this.values) {
          this.showname = this.picdata[i].showname
        }
      }
    }
    if (!this.values) {
      this.grantime = '请选择'
    }
    console.log(this.$route.query.num, '0909')
  },
  methods: {

    closepicker (val) {
      if (val) {
        this.closeTouch()
      } else {
        this.openTouch()
      }
    },
    closeTouch () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })//阻止默认事件
    },
    openTouch () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false })//打开默认事件
    },
    Determine () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      this.popupVisible = false
    },
    onDataChange (picker, values) {
      // console.log(values[0], 'w')

      if (values[0] == undefined) {
        this.showname = '请选择'
      } else {
        this.showname = values[0].showname
        console.log(values[0])
        //this.$emit('getpicval', values[0].showid)
      }
    },
    showpicker () {
      document
        .getElementsByTagName('body')[0]
        .addEventListener('touchmove', this.handler, { passive: false })
      this.dataList[0].values = this.picdata
      this.popupVisible = true
    },
    handleConfirm (data) {
      //console.log(data)
      this.grantime = this.formatDate(data)
      this.$emit('update:gettime', this.grantime)
    },
    addtime () {
      this.$refs.picker.open()
    },
    //时间选择优化函数
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    }
  }
}
</script>

<style scoped>
.picker-slot {
  width: 100%;
}
.picker {
  height: 100%;
}
.h3 {
  display: inline-block;
  width: 200px;
  text-align: right;
}
</style>